<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        class Person {
            constructor(name, age) {
                this.name = name
                this.age = age
                console.log("子类constructor中的super调用了");
            }
            sayName() {
                console.log(this.name);
            }
        }
        // var p = new Person('李四',20)

        // Student 加一个skill

        /* class Student{
           constructor(name, age,skill) {
                this.name = name
                this.age = age
                this.skill = skill
            }
            sayName() {
                console.log(this.name);
            }
        } */

        // 没有extends关键字：出现大量重复代码，代码冗余。不符合编程初衷。

        // 有extends // js中只能继承一个（小缺点），java中可以继承多个
        // 继承了所有的属性和方法

        // 1. 不添加属性，可以不写构造函数
        class Student extends Person {

        }

        // 可以直接这样写
        // var s = new Student('zs', 20)
        // console.log(s);

        // 2. 只要添加属性，必须写构造函数（构造方法）
        // 添加属性，才会用到构造函数以及其中的super
        class Student1 extends Person {
            constructor(name, age, skill) {
                console.log("子类constructor中的super调用之前"); // 不报错
                // 11111 !!!! 这里的super：调用父类的构造方法
                // 构造函数中的super必须写在第一行！！！（其他编程语言也是）
                // 不然会报错 // 写业务代码会报错【】
                // this.party = 1 // 报错
                //  Must call super constructor in derived class 
                // before accessing 'this' or returning from derived constructor
                // 在访问“this”或从派生构造函数返回之前，
                // 必须在派生类中调用super构造函数。
                // 1. 如果有extends关键字的类中写了constructor，则里面必须写super()
                // 2. 且super()一定要在到达this之前写。
                super(name, age)
                console.log("子类constructor中的super调用之后");
                this.skill = skill
            }
            say() {
                super.sayName()
                this.sayName()
                // 以上两种均可：
                // 直接调父类的，// 22222 !!!es6规定，通过super调用父类的方法时，super会绑定子类的this
                // 调自己的，会通过原型找到。
            }
        }
        var s1 = new Student1('zs', 20, 'webgis')
        console.log(s1);
        s1.say()

        // 
    </script>
</body>

</html>